<template>
	<view class="container">
		
		<swiper :current="TabCur" class="swiper-box" :duration="300" @change="changeTab">
			<swiper-item >
				<scroll-view class="list"  scroll-y >
					
					<!-- 空白页 -->
					<view v-if="goodsCollectionList.length===0" style="color: #CCCCCC;text-align: center;width: 100%;height: 500upx;line-height: 500upx;font-size: 32upx;"> 暂无收藏商品</view>
										
					<block v-else v-for="(item, index) in goodsCollectionList" :key="index">
						<view class="cart-item"  :class="{'b-b': index!==goodsCollectionList.length-1}" >
							<view class="image-wrapper" @click="navToProductDetail(item.ID)">
								<image  :src="img+item.THUMB"  :class="[item.loaded]" mode="aspectFill"  lazy-load  @load="onImageLoad('goodsCollectionList', index)"  @error="onImageError('goodsCollectionList', index)"></image>
								<text class="un-shouqing" v-if="item.SALESTOCK===0">已售罄</text>
							</view>
							
							<view class="item-right">
								<text class="clamp title" @click="navToProductDetail(item.ID)">{{item.NAME}}</text>
								<view class="">
									<text class="attr" @click="navToProductDetail(item.ID)">{{item.GOODSSPEC}}</text>
								</view>
								
								<text class="price clamp" @click="navToProductDetail(item.ID)">¥{{item.SALEPRICE}}</text>
								<view class="un-xiangsi" @click="navToSimilarity(item.ID)"> 找相似 </view>
							</view>
						</view>
					</block>
				</scroll-view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex'; 
	export default {
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		data() {
			return {
				TabCur:0,
				img:'',
				goodsCollectionList:[],
			}
		},
		onLoad(){
			this.loadData();
			
			this.img = getApp().globalData.imageAddress;
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			async loadData(){
				
				this.$http.post("/user/collectionList1",{
					SIGNATURE:uni.getStorageSync("SIGNATURE"),
					TOKEN:uni.getStorageSync('userInfo').TOKEN,
				}).then(res=>{
					if(res.data.STATE==='0' && res.statusCode===200){
						this.goodsCollectionList=res.data.OBJECT;
					}
				}).catch(err=>{
					console.log('request fail',err);
				})
				
			}, 
			//监听image加载完成
			onImageLoad(key, index) {
				this.$set(this[key][index], 'loaded', 'loaded');
			},
			//监听image加载失败
			onImageError(key, index) {
				this[key][index].THUMB = '/static/errorImage.jpg';
			},
			onImageError1(key, index,index2) {
				this[key][index].picSrc[index2] = '/static/errorImage.jpg';
			},
			//点击标题
			tabSelect(cur){
				this.TabCur=cur;
			},
			//swiper 切换
			changeTab(e){
				this.TabCur = e.target.current;
			},
			//跳转商品详情
			navToProductDetail(goodsId){
				uni.navigateTo({
					url:`/pages/product/product?id=`+goodsId
				})
			},
			//预览图片
			previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.commentList[e.target.dataset.i].picSrc
				})
			},
			//跳转相似商品
			navToSimilarity(goodsId){
				uni.navigateTo({
					url:`/pages/collect/similarity/similarity?goodsId=`+goodsId
				})
			}
		}
	}
</script>

<style lang="scss">
	page,.container{
		background-color: #f5f5f5;
		height: 100%;
		.swiper-box {
			flex: 1;
			width: 100%;
			height: calc(100% - 0upx);
			// height: 100%;
			.list{
				height: 100%;
				width: 100%;
				margin-top: 10upx;
				border-top: 1upx solid #F2F2F2;
			}
		}
	}
	
	.un-collect-tou{
		white-space: nowrap;
		background-color: #ffffff;
		.un-collect-tou1{
			display: flex;
			text-align: center;
			height: 70upx;
			.cu-item {
				height: 70upx;
				display: inline-block;
				line-height: 70upx;
				margin: 0 10upx;
				padding: 0 20upx;
				flex: 1;
				font-size: 25upx;
			}
			.cur{
				color: #E02E24;
				border-bottom: #E02E24 4upx solid;
				position: relative;
			}
			// .cur::after {
			// 	content: "";
			// 	position: absolute;
			// 	width: 140upx;
			// 	height: 4upx;
			// 	bottom:0 ;
			// 	left: 30%;
			// 	background-color: #E02E24;
			// }
		}
	}
	
	.cart-item{
		
		background: #fff;
		display:flex;
		position:relative;
		padding:18upx 55upx;
		.image-wrapper{
			background-color: #fff;
			padding-top: 0upx;
			padding-left: 0upx;
			width: 150upx;
			height: 150upx;
			flex-shrink: 0;
			position:relative;
			image{
				border-radius:8upx;
			}
			.un-shouqing{
				position: absolute;
				z-index: 5;
				width: 100%;
				height: 30upx;
				border: 0upx solid #666666;
				background-color: #666666;
				color: #fff;
				font-size: 24upx;
				left: 0upx;
				top: 120upx;
				text-align: center;
			}
		}
		.item-right{
			position:relative;
			padding-left: 30upx;
			width: 380upx;
			.title,.price{
				font-size:25upx;
				color: $font-color-dark;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.attr{
				font-size: 20upx;
				color: $font-color-light;
			}
			.price{
				color: #F76260;
				margin-top: 10upx;
			}
			
			.un-xiangsi{
				position:absolute;
				left: 370upx;
				bottom: 10upx;
				z-index: 4;
				width: 115upx;
				height: 48upx;
				line-height: 45upx;
				text-align: center;
				font-size: 25upx;
				color: $font-color-light;
				background: #fff;
				border-radius:5px;
				border: 1upx solid $font-color-light;
			}
			
			.item{
				color: #999999;
				font-size: 30upx;
				margin-right: 10upx;
			}
			.item1{
				color: #999999;
				font-size: 24upx;
				margin-right: 20upx;
			}
		}
	}
	
	.cart-item1{
		padding:0upx 40upx;
		background-color: #fff;
		margin-top: 25upx;
		position:relative;
		.un-touxiang{
			display: flex;
			align-items: center;
			.portrait{
				width: 76upx;
				height: 76upx;
				border:5upx solid #fff;
				border-radius: 50%;
				margin-top: 15upx;
			}
			.un-touxiang-text{
				display: block;
				margin: 20upx 400upx 20upx 20upx;
			}
			text{
				color: #999999;
				font-size:25upx;
				line-height: 40upx;
			}
			
		}
		
		.un-p{
			position: absolute;
			z-index: 8;
			width: 60upx;
			height: 37upx;
			background-color: #666666;
			font-size: 26upx;
			color: #fff;
			border-radius: 50upx;
			text-align: center;
			top: 250upx;
			right: 60upx;
		}
		
		.un-image-section{
			
			white-space: nowrap;
			.scoll-wrapper{
				display:flex;
				align-items: flex-start;
				
			}
			
			.image-wrapper{
				background-color: #fff;
				width: 190upx;
				height: 190upx;
				flex-shrink: 0;
				margin: 0upx 50upx 0upx 0upx;
				image{
					border-radius:8upx;
				}
			}
		}
		
		.un-comment{
			height: auto;
			padding: 5upx 0upx;
			overflow:hidden;
			text-overflow:ellipsis;
			text{
				font-size: 24upx;
				color: #999999;
				line-height: normal;
				
			}
		}
		
		.un-shijian{
			color: #999999;
			font-size: 24upx;
			display: flex;
			line-height: 80upx;
			.un-text1{
				margin-left:7upx;
				margin-right: 15upx;
			}
			.un-text2{
				margin-left:7upx;
			}
		}
	}
</style>
